//获取操作对象
var box = document.querySelector(".contianer_js")
var boxs = document.querySelector(".contianer_js").querySelector("tbody")
// console.log(boxs)
// console.log(box)
//获取账号
var name1 = getCookie('name')
// console.log(name1) //账号名称
//定义变量，该账号中所有的数据
var lists
//判断当前账号是否存在
if (name1) {
    show1()
} else {
    alert("你还未登录")
    //获取地址栏信息
    var url = location.href
    //跳转到登录页
    location = './login.html?url2=' + url
}

function show1() {
    //获取当前账号存储的数据
    lists = localStorage.getItem(name1) || "[]"
    // console.log(lists)
    //把字符串转为数组对象
    lists = eval('(' + lists + ')')
    // console.log(lists)
    //判断当前账号是否还有数据
    if (lists.length > 0) {
        // 检查当前数组中所有的is_select字段是否都等于1
        var bool = lists.every(item => {
            return item.is_select == 1
        })
        //创建字符串，拼接所有内容
        //拼接头部
        var str = `
        <tr>
            <th width="7%">
                <input type="checkbox" name="quan" ${bool?"checked":''} class="selectitemAll" id="check">
                <label for="check">全选</label>
            </th>
            <th width="47%">商品</th>
            <th width="17%">价格</th>
            <th width="12%">数量</th>
            <th width="10">小计</th>
            <th width="7%">操作</th>
        </tr>
         `
        //遍历数组
        lists.forEach(item => {
            //拼接商品部分
            str += `
            <tr>
                <td>
                    <input type="checkbox" name="xuan" ${item.is_select==1?"checked":''} data-id="${item.id}">
                </td>
                <td class="td01_js">
                    <div class="box03 clearfix">
                        <a href="#">
                            <img class="fl" src="${item.src}" alt="">
                        </a>
                        <p class="fl blue_js">
                            <a href="#">${item.title}</a><br>
                            <span class="grey_js">商品编号：ACK-628-01-K-ZA</span>
                        </p>
                    </div>
                </td>
                <td>￥<span>${item.price}</span></td>
                <td class="contianer">
                    <button type="button" class="btn btn-default" data-id="${item.id}" ${item.cart_number<=1?"disabled":''}>-</button>
                    <button type="button" class="btn btn-default">${item.cart_number}</button>
                    <button type="button" class="btn btn-default" data-id="${item.id}">+</button>
                </td>
                <td>￥<span class="xiaoji">${item.price}</span></td>
                <td>
                    <a href="#" data-id="${item.id}">删除</a>
                </td>
            </tr>
            `
        })
        //拼接底部
        str += `
        <div class="box04 clearfix">
            <div class="box04_l fl clearfix">
                <span class="p_sty01">
                    <input type="checkbox" class="selectitemAll" name="quan" id="checkbox" ${bool?"checked":''}>
                    <label for="checkbox">全选</label>
                </span>
                <span class="p_sty02 red_js">清空购物车</span>
                <span class="p_sty03 fr">共选中
                    <strong>${total2()[0]}</strong> 件商品　共计 <em>￥ <b>${total2()[1]}</b></em>
                </span>
            </div>
            <div class="box04_r fr">
                <button type="button" class="btn03" style="color:rgba(0,0,0,0);">结算</button>
            </div>
        </div>
        `
        //把拼接好的内容渲染到页面中
        boxs.innerHTML = str
    } else {
        //创建字符串，拼接所有内容
        var str = `
        <h2>这个是一个购物车页 <a href="./list.html" class="btn btn-info btn-md">返回列表页</a></h2>
        <div class="jumbotron">
            <h1>您的购物车空空如也</h1>
            <p>点击下方按钮快去选购吧! ^_^</p>
            <p><a class="btn btn-primary btn-lg" href="./list.html" role="button">赶紧去逛逛吧</a></p>
        </div>
        `
        //把拼接好的内容渲染到大盒子中
        box.innerHTML = str
    }
}

/* ----------------------购物车功能------------------------ */
//給大盒子对象绑定点击事件
box.onclick = function (e) {
    //事件对象兼容
    var e = e || window.event
    //获取操作目标
    var tg = e.target || e.srcElement
    //判断当前点击的是否为加法按钮
    if (tg.innerHTML == "+") {
        // console.log(tg)
        //获取当前按钮的id属性
        var id = tg.getAttribute('data-id')
        console.log(lists)
        //遍历数组中所有元素
        lists.forEach(item => {
            //判断当前遍历的元素id是否等于按钮所对应的id
            if (item.id == id) {
                item.cart_number++
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //减法
    if (tg.innerHTML == '-') {
        //获取当前按钮的id
        var id = tg.getAttribute('data-id')
        //遍历数组元素
        lists.forEach(item => {
            //判断当前元素中的id是否等于按钮的id
            if (item.id == id) {
                item.cart_number--
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //删除
    if (tg.innerHTML == "删除") {
        // console.log(tg)
        //获取当前按钮的id
        var id = tg.getAttribute('data-id')
        //过滤数组元素的id等于当前按钮id
        lists = lists.filter(item => {
            return item.id != id
        })
        // console.log(lists)
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        show1()
    }
    //全选
    if (tg.name == "quan") {
        console.log(tg)
        //遍历数组中所有商品
        lists.forEach(item => {
            //判断全选框是否被选中
            if (tg.checked) {
                //让商品中的is_select字段为1
                item.is_select = 1
            } else {
                item.is_select = 0
            }
        })
        // console.log(lists)
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //选中框
    if (tg.name == "xuan") {
        //获取当前选中框的id
        var id = tg.getAttribute("data-id")
        //遍历数组元素
        lists.forEach(item => {
            //判断当前元素的id是否等于选中框的id
            if (item.id == id) {
                //判断当前选中框是否被选中
                if (tg.checked) {
                    item.is_select = 1
                } else {
                    item.is_select = 0
                }
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //结算
    if (tg.innerHTML == "结算") {
        //给定确认框
        if (confirm("你确定要购买吗？")) {
            alert("已支付：" + total2()[1])
            //删除已购买的商品
            lists = lists.filter(item => {
                return item.is_select != 1
            })
            //把操作结果重新存放在localStorage中
            localStorage.setItem(name1, JSON.stringify(lists))
            //重新调用显示数据的函数
            show1()
        }
    }
    //清空购物车
    if (tg.innerHTML == "清空购物车") {
        lists = []
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
}
//所选商品数量和价格
function total2() {
    var num1 = 0 // 所选商品数量
    var num2 = 0 //所选商品价格
    //遍历数组元素
    lists.forEach(item => {
        //判断当前商品是否被选中
        if (item.is_select == 1) {
            //累积所有商品数量
            num1 += item.cart_number
            //累积所有选中商品的小计
            num2 += item.cart_number * item.price
        }
    })
    return [num1, num2.toFixed(2)]
}